<template>
  <div>
    <p>{{ data }}</p>
    <div v-for="item in list" :key="item.groupId">
      <span>{{ item.title }}</span>
      <div v-for="item in item.children" :key="item.groupId" class="child" @click.stop="handleClick(item)">
        <span>{{ item.title }}</span>
        <div v-for="item in item.children" :key="item.groupId" class="child" @click.stop="handleClick(item)">
          <span>{{ item.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      list: [
        {
          title: "A区",
          groupId: "a",
          children: [
            {
              title: "产品一",
              groupId: "a-1",
              children: [
                {
                  title: "规格一",
                  groupId: "a-1-1",
                },
                {
                  title: "规格二",
                  groupId: "a-1-2",
                },
                {
                  title: "规格三",
                  groupId: "a-1-3",
                },
                {
                  title: "规格四",
                  groupId: "a-1-4",
                },
              ],
            },
            {
              title: "产品二",
              groupId: "a-2",
            },
          ],
        },
        {
          title: "B区",
          groupId: "b",
          children: [
            {
              title: "产品一",
            },
            {
              title: "产品二",
            },
          ],
        },
        {
          title: "C区",
          groupId: "c",
          children: [
            {
              title: "产品一",
            },
            {
              title: "产品二",
            },
          ],
        },
      ],
      data: "",
    };
  },

  mounted() {},
  methods: {
    handleClick(item) {
      console.log(item);
      this.data = item;
    },
    handleClick2(idx, item) {
      console.log(idx, item);
      this.data = item;
    },
  },
};
</script>

<style scoped lang="scss">
.child {
  margin-left: 1em;
  cursor: pointer;
}
</style>
